import React from 'react';
import { Button } from 'antd-mobile';
import './index.css'

export interface BlickerProps {
    className?: string;
    text: string;
    des?: string;
    img?: string;
    btnText?: string;
    btnType?: "primary" | "warning" | "ghost";
    disabled?: boolean;
    onClick?: Function;
}

class Blicker extends React.Component<BlickerProps, State> {
    render() {
        const {className, text, des, img, btnText, btnType, disabled, onClick} = this.props;
        return (
            <div className={className ? `blicker ${className}` : "blicker"}>
                <div className="blicker-bd">
                    {
                        !!img && 
                        <div className="blicker-bd-img">
                            <img src={img} alt=""/>
                        </div>
                    }
                    <div className="blicker-bd-ct">
                        <div className="blicker-bd-text">{text}</div>
                        {
                            !!des &&
                            <div className="blicker-bd-tips">{des}</div>
                        }
                    </div>
                </div>
                {
                    !!btnText && 
                    <div className="blicker-btns">
                        <Button 
                            inline
                            size="small"
                            className="my-button"
                            type={btnType ? btnType : "ghost"}
                            disabled={disabled}
                            onClick={() => {onClick && onClick()}}
                        >
                            {btnText}
                        </Button>
                    </div>
                }
            </div>
        )
    }
}

export default Blicker